// 树组件
<template>
  <div class="v-input-select-tree">
    <el-input class="v-input-select"
              v-model="inputContent"
              placeholder="请输入内容"
              @focus="focusMethod()"></el-input>
    <el-dialog :center="false"
               :title="dialogTitle"
               :visible.sync="dialogVisible"
               :modal="modal"
               :modal-append-to-body="modalAppendToBody"
               :append-to-body="appendToBody"
               :lock-scroll="lockScroll"
               :close-on-click-modal="closeOnClickModal"
               :show-close="showClose"
               :width="dialogWidth"
               class="select-tree-dialog">
      <el-divider></el-divider>
      <div class="select-tree-body">
        <VelTree :inputPlaceHolder="inputPlaceHolder"
                 :hasInput="hasInput"
                 :clearable="clearable"
                 :size="size"
                 :treeData="treeData"
                 :emptyText="emptyText"
                 :defaultProp="defaultProp"
                 :nodeKey="nodeKey"
                 :expandOnClickNode="expandOnClickNode"
                 :defaultExpandedKeys="defaultExpandedKeys"
                 :defaultExpandAll="defaultExpandAll"
                 :showCheckbox="showCheckbox"
                 :defaultCheckedKeys="defaultCheckedKeys"
                 :highlightCurrent="highlightCurrent"
                 :checkOnClickNode="checkOnClickNode"
                 :checkStrictly="checkStrictly"
                 :iconClass="iconClass"
                 :lazy="lazy"
                 :hasRenderContent="hasRenderContent"
                 :filterFields="filterFields"
                 @loadNodeData="loadNode"
                 @handleNodeClick="handleNodeClick"
                 @handleCheckChange="handleCheckChange"
                 @append="append"
                 @remove="remove"
                 @edit="edit"></VelTree>
      </div>
      <span slot="footer"
            class="dialog-footer">

        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import VelTree from '../tree/index'
export default {
  name: 'VinputSelectTree',
  components: {
    VelTree
  },
  props: {
    dialogTitle: String,
    modal: Boolean,
    modalAppendToBody: Boolean,
    appendToBody: Boolean,
    lockScroll: Boolean,
    closeOnClickModal: Boolean,
    showClose: Boolean,
    dialogWidth: String,

    inputContent: String,
    dialogTitle: String,
    height: String,

    hasInput: Boolean,
    inputPlaceHolder: String,
    clearable: Boolean,
    size: String,
    treeData: Array,
    emptyText: String,
    nodeKey: String,
    defaultProp: Object,
    expandOnClickNode: Boolean,
    defaultExpandedKeys: Array,
    defaultExpandAll: Boolean,
    showCheckbox: Boolean,
    defaultCheckedKeys: Array,
    highlightCurrent: Boolean,
    checkOnClickNode: Boolean,
    checkStrictly: Boolean,
    iconClass: String,
    draggable: Boolean,
    lazy: Boolean,
    hasRenderContent: Boolean,
    filterFields: String

  },
  data () {
    return {
      dialogVisible: false
    };
  },
  watch: {
    searchText (val) {
      this.$refs.tree.filter(val)
    }
  },
  computed: {
  },
  methods: {
    focusMethod () {
      this.dialogVisible = true;
    },
    // 过滤树的数据 code 或者 title
    filterMethod (value, data) {
      if (!value) return true;
      if (this.filterFields.length > 0) {
        return data.title.indexOf(value) !== -1 || data.code.indexOf(value) !== -1;
      }
      return data.title.indexOf(value) !== -1;
    },
    // 懒加载数据
    loadNode (node, resolve) {
      this.$emit('loadNodeData', node, resolve)
    },
    // 节点点击事件
    handleNodeClick (data) {
      this.$emit('handleNodeClick', data)
    },
    // 选择的节点发生变化
    handleCheckChange (data, checked, indeterminate) {
      this.$emit('handleCheckChange', data, checked, indeterminate)
    },
    renderContent (h, { node, data, store }) {
      if (this.hasRenderContent) {
        return (
          <span class="custom-tree-node" style="flex: 1;display: flex;align-items: center;justify-content: space-between;font-size: 14px;padding-right: 8px;">
            <span>{node.data[this.defaultProp.label]}</span>
            <span>
              <el-button size="mini" type="text" on-click={() => this.append(data)}>新增</el-button>
              <el-button size="mini" type="text" on-click={() => this.remove(node, data)}>删除</el-button>
              <el-button size="mini" type="text" on-click={() => this.edit(node, data)}>修改</el-button>
            </span>
          </span>);
      } else {
        return (<span class="custom-tree-node" style="align-items: center;justify-content: space-between;font-size: 14px"><span>{node.data[this.defaultProp.label]}</span></span>);
      }
    },
    append (data) {
      this.$emit('append', data)
    },
    remove (node, data) {
      this.$emit('remove', node, data)
    },
    edit (node, data) {
      this.$emit('edit', node, data)
    }

  }
}
</script>		